// 获取屏幕尺寸
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var w = canvas.width = window.innerWidth
var h = canvas.height = window.innerHeight

// 创建图片对象
var img = new Image();
img.src = "image1.jpg";

// 图片加载完成回调
img.onload = function(){
    ctx.drawImage(img, 0, 0);
    // 获取图片像素信息
    // Uint8ClampedArray对象是一个8位无符号整数的类型化数组，里面的值都是0-255。
    var imgData = ctx.getImageData(0, 0, img.width, img.height);
    createParticles(imgData)
    loop()
}

// t 当前时间
// b 初始值
// c 总位移
// d 总时间
function easeInOutQuad(t, b, c, d) {
    t/=d/2;
    if(t<1)
    {
        return c/2*Math.pow(2,10*(t-1))+b;
    }
    t--;
    return c/2*(-Math.pow(2,-10*t)+2)+b;
}

// 创建粒子数组
var particles = []

// 粒子对象
var Particle = function(x,y,radius,pos,img){
    // 初始位置
    this.sx=600;
    this.sy=450;
    //目标位置
    this.tx=x;
    this.ty=y;
    //粒子半径
    this.radius=2;
    //当前帧数
    this.frameNum=0;
    //总的帧数
    this.frameCount=150;
    //播放完的标识符
    this.complete=false;
    //延迟标识//随机生成
    this.delay=this.frameCount*Math.random();
    this.delayCount=0;

    this.fillStyle = "rgba("+img.data[pos]+","+img.data[pos+1]+","+img.data[pos+2]+","+img.data[pos+3]+")";
    //更新位置

    /*this.update = function(){
        if(this.delay > this.delayCount){
            this.delayCount++
            return
        }

        if(this.frameNum < this.frameCount) {
            // 获取当前x轴位置
            this.curx = easeInOutQuad(this.frameNum, this.sx, this.tx - this.sx, this.frameCount);
            // 获取当前y轴位置
            this.cury = easeInOutQuad(this.frameNum, this.sy, this.ty - this.sy, this.frameCount);
            // 帧数+1
            this.frameNum += 1;
        } else {
            this.complete = true
        }
    }*/
    this.update = function(){
        if(this.delay > this.delayCount){
            this.delayCount++;
            return;
        }

        if(this.frameNum < this.frameCount) {
            // 获取当前x轴位置
            this.cur_x = easeInOutQuad(this.frameNum, this.sx, this.tx - this.sx, this.frameCount);
            // 获取当前y轴位置
            this.cur_y = easeInOutQuad(this.frameNum, this.sy, this.ty - this.sy, this.frameCount);
            // 帧数+1
            this.frameNum += 1;
        }
        else
        {
            this.complete = true
        }
    }

    this.draw = function(){
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.cur_x, this.cur_y,2, 0, 2*Math.PI,false);
        ctx.fillStyle = this.fillStyle
        ctx.fill();
        ctx.restore();
    }
}

// 根据像素信息创建粒子
function createParticles(imgData){

    for(var x=0; x<imgData.width; x=x+5) {

        for(var y=0; y<imgData.height; y=y+5) {
            // 获取当前像素点索引
            var i = (y*imgData.width + x) * 4;
            // 按rgba筛选像素点
            if(imgData.data[i]>0){
                var temp_particle= new Particle(x+400,y+50, 2,i,imgData);
                particles.push(temp_particle);

            }

        }
    }
    /*var q1=400;
    var q2=50;
    for(var i=0;i<imgData.width;i++)
    {
        for(var j=0;j<imgData.height;j++)
        {

            var pos=(j*imgData.width+i)*4;
            if(imgData.data[pos]>=0)
            {
                var temp_particle=new Particle(i,j,pos,imgData);
                particles.push(temp_particle);
                q2++;
            }
        }
        q2=50;
        q1++;
    }*/
}
var rafId;
// 开始渲染粒子
/*function loop(){
    // 绘制完成停止动画


    // 清空画布
    ctx.clearRect(0, 0, w, h);
    //  绘制粒子
    for(var i=0;i<particles.length;i=i+Math.floor(Math.random()*5)+1){
        particles[i].update()
        particles[i].draw()
    }
    // 获取绘制完成数量
    var finishCount = particles.filter(function(item){
        return item.complete
    }).length
    if (finishCount >= particles.length) {
        cancelAnimationFrame(rafId);
        return;
    }
    // 帧动画回调
    if(finishCount < particles.length){
        rafId = requestAnimationFrame(loop);
    }
}*/
var requestId;
function loop() {
    //完成绘制的数量
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<particles.length;i=i+Math.floor(Math.random()*5)+1)
    {
        particles[i].update();
        particles[i].draw();
    }
    var complete_count=particles.filter(function (s) {
        return s.complete;
    }).length;
    if(complete_count>=particles.length){
        //完成了
        //cancelAnimationFrame(requestId);
        clearTimeout(requestId);
        return;
    }
    if(complete_count<particles.length)
    {
        //requestId=requestAnimationFrame(Animate);
        requestId=setTimeout(loop,2);
    }
}

